import Icon from '@/components/Icon';
import { customeColor } from '@/src/config';
import { View } from '@tarojs/components';
import classNames from 'classnames';
import React, { useCallback, useMemo } from 'react';
import styles from './index.module.scss';

export const SortFilter = {
  // 综合
  comprehensive: undefined,
  // 新品
  newProduct: 4,
  // 销量
  sales: 1,
  // 价格 低 到 高
  up: 2,
  // 价格 高 到 低
  down: 3,
};

const BaseFilterList = [
  {
    label: '销量',
    value: SortFilter.sales,
  },
  {
    label: '价格',
    type: 'arrow',
    choices: [
      {
        icon: 'a-tubiaoai_huaban7fuben15',
        className: 'arrow-up',
        size: 10,
        value: SortFilter.up,
      },
      {
        icon: 'a-tubiaoai_huaban7fuben16',
        className: 'arrow-down',
        size: 10,
        value: SortFilter.down,
      },
    ],
  },
];

export const SortFilterList = [
  {
    label: '综合',
    value: SortFilter.comprehensive,
  },

  ...BaseFilterList,
];

export const SortFilterList2 = [
  {
    label: '新品',
    value: SortFilter.newProduct,
  },
  ...BaseFilterList,
];

const SimpleSortItem = ({ value, onChange, option }) => {
  return (
    <View
      className={classNames('sort-item', {
        'active customePageStyle': value === option.value,
      })}
      onClick={() => {
        onChange(option.value);
      }}
    >
      {option.label}
    </View>
  );
};

const ArrowSortItem = ({ value, onChange, option }) => {
  const isActive = useMemo(() => {
    return !!option.choices.find((choice) => {
      return choice.value === value;
    });
  }, [value, option]);

  const choices = useMemo(() => {
    return option.choices.map((choice) => {
      return {
        active: choice.value === value,
        ...choice,
      };
    });
  }, [value, option]);

  const toggle = useCallback(() => {
    const index = option.choices.findIndex((choice) => {
      return choice.value === value;
    });

    const pos = (index + 1) % option.choices.length;
    onChange(option.choices?.[pos]?.value);
  }, [onChange, option, value]);

  return (
    <View
      className={classNames('sort-item arrow', {
        'active customePageStyle': isActive,
      })}
      onClick={toggle}
    >
      <View className="item-label">{option.label}</View>

      <View className="arrow-list">
        {choices?.map(({ active, icon, className, size }) => {
          return (
            <Icon
              key={icon}
              {...{
                name: icon,
                size,
                className,
                color: active ? customeColor : '#999999',
              }}
            />
          );
        })}
      </View>
    </View>
  );
};

const StandProductSort = ({
  value,
  onChange,
  className = '',
  customSortFilterList = SortFilterList,
  showBottom = true,
}) => {
  return (
    <View className={`${styles.StandProductSort} ${className}`}>
      <View className="sort-wrap">
        {customSortFilterList.map((option) => {
          if (option.type === 'arrow') {
            return <ArrowSortItem {...{ value, onChange, option }} />;
          }

          return <SimpleSortItem key={option.value} {...{ value, onChange, option }} />;
        })}
      </View>

      {showBottom && <View className="split-line"></View>}
    </View>
  );
};

export default StandProductSort;
